<template>
	<div class="el-tabs__nav-scroll" style="width: 1000px">
		<el-tabs type="border-card">
			<el-tab-pane label="我支持的">
				<div>
					<template v-show="user.idcardstatus == 1">
						<el-table :data="support" style="width: 100%; padding: 30px">
							<el-table-column label="项目信息">
								<template slot-scope="scope">
									<div style="height: 120px" v-show="scope.row.items.status == 1">
										<p style="margin: 0 auto; text-align: center">
											{{ scope.row.items.iname }}
										</p>
										<p style="margin-left: 0px" v-show="scope.row.items.daybetween > 0">
											<span
												style="margin-right: 0px">剩余时间：{{ scope.row.items.daybetween }}天</span>==>已完成进度：
											<span v-show="scope.row.items.percentage < 100">
												<span style="color: green; font-size: 13px">众筹进行中</span>
												<el-progress style="margin-top: 10px" :text-inside="true"
													:stroke-width="24" :percentage="scope.row.items.percentage"
													status="success"></el-progress>
											</span>
											<span v-show="scope.row.items.percentage >= 100">
												<span style="color: green; font-size: 13px">众筹成功</span>
												<el-progress style="margin-top: 10px" :text-inside="true"
													:stroke-width="24" :percentage="100" status="success"></el-progress>
											</span>
										</p>
										<p style="margin-left: 0px" v-show="scope.row.items.daybetween <= 0">
											<span style="margin-right: 0px">众筹结束</span>=======》已完成进度：
											<span v-show="scope.row.items.percentage >= 100">
												<span style="color: green; font-size: 13px">众筹成功</span>
												<el-progress style="margin-top: 10px" :text-inside="true"
													:stroke-width="24" :percentage="scope.row.items.percentage"
													status="success"></el-progress>
											</span>
											<span v-show="scope.row.items.percentage < 100">
												<span style="color: red; font-size: 13px">
													众筹失败</span>
												<el-progress style="margin-top: 10px" :text-inside="true"
													:stroke-width="24" :percentage="scope.row.items.percentage"
													status="exception"></el-progress>
											</span>
										</p>
									</div>
									<div v-show="scope.row.items.status == 0">
										<p style="margin: 0 auto; text-align: center">
											{{ scope.row.items.iname }}
										</p>
										<p style="margin-left: 0px">项目未开始</p>

										<el-progress :text-inside="true" :stroke-width="24" :percentage="0"
											status="success"></el-progress>
									</div>
								</template>
							</el-table-column>

							<el-table-column label="支持日期" width="120">
								<template slot-scope="scope">
									<el-tag size="medium">{{ scope.row.paytime }}</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="支持金额(元)" width="120">
								<template slot-scope="scope">
									<el-tag size="medium">{{ scope.row.payonemoney }}</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="回报数量" width="120">
								<template slot-scope="scope">
									<el-tag size="medium">{{ scope.row.rewardnum }}</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="交易状态" width="120">
								<template slot-scope="scope">
									<span v-if="scope.row.status == 1">交易成功</span>
									<span v-if="scope.row.status == 0">未付款</span>
								</template>
							</el-table-column>
							<el-table-column style="height: 50px; width: 100px" label="操作">
								<template slot-scope="scope">
									<el-popover trigger="hover" placement="top">
										 
										<p>项目名: {{ scope.row.items.iname }}</p>
										 
										<p>发起人:{{ scope.row.items.itemMan.mshow }}</p>
										 
										<p>预筹集金额: {{ scope.row.items.amoney }}</p>
										 
										<p>已筹集金额：{{ scope.row.items.nmoney }}</p>
										 
										<p>项目描述：{{ scope.row.items.iintro }}</p>
										 
										<div slot="reference" class="name-wrapper">
											  <el-button>交易详情</el-button>
										</div>
									</el-popover>
									<el-button v-if="scope.row.status == 0" @click="topay(scope.row)"
										style="width:100px">去付款</el-button><br>
									<el-button v-if="scope.row.status == 0" @click="todelddan(scope.row)">删除订单
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</template>
				</div>
				<!-- 分页 -->
				<el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
					:current-page="queryinfo1.pagenum" :page-sizes="[1, 3, 5, 10]" :page-size="queryinfo1.pagesize"
					layout="total, sizes, prev, pager, next, jumper" :total="total1">
				</el-pagination>
				<div id="xxx1"></div>
			</el-tab-pane>
			<el-tab-pane label="我关注的">
				<div>
					<template>
						<el-table :data="gz" style="width: 100%; padding: 30px">
							<el-table-column label="项目信息">
								<template slot-scope="scope">
									<div style="height: 120px" v-show="scope.row.status == 1">
										<p style="margin: 0 auto; text-align: center">
											{{ scope.row.iname }}
										</p>
										<p style="margin-left: 0px" v-show="scope.row.daybetween > 0">
											<span
												style="margin-right: 0px">剩余时间：{{ scope.row.daybetween }}天</span>==>已完成进度：
											<span v-show="scope.row.percentage < 100">
												<span style="color: green; font-size: 13px">众筹进行中</span>
												<el-progress style="margin-top: 10px" :text-inside="true"
													:stroke-width="24" :percentage="scope.row.percentage"
													status="success"></el-progress>
											</span>
											<span v-show="scope.row.percentage >= 100">
												<span style="color: green; font-size: 13px">众筹成功</span>
												<el-progress style="margin-top: 10px" :text-inside="true"
													:stroke-width="24" :percentage="100" status="success"></el-progress>
											</span>
										</p>
										<p style="margin-left: 0px" v-show="scope.row.daybetween <= 0">
											<span style="margin-right: 0px">众筹结束</span>=======》已完成进度：
											<span v-show="scope.row.percentage >= 100">
												<span style="color: green; font-size: 13px">众筹成功</span>
												<el-progress style="margin-top: 10px" :text-inside="true"
													:stroke-width="24" :percentage="scope.row.percentage"
													status="success"></el-progress>
											</span>
											<span v-show="scope.row.percentage < 100">
												<span style="color: red; font-size: 13px">
													众筹失败</span>
												<el-progress style="margin-top: 10px" :text-inside="true"
													:stroke-width="24" :percentage="scope.row.percentage"
													status="exception"></el-progress>
											</span>
										</p>
									</div>
									<div v-show="scope.row.status == 0">
										<p style="margin: 0 auto; text-align: center">
											{{ scope.row.iname }}
										</p>
										<p style="margin-left: 0px">项目未开始</p>

										<el-progress :text-inside="true" :stroke-width="24" :percentage="0"
											status="success"></el-progress>
									</div>
								</template>
							</el-table-column>

							<el-table-column label="支持人数" width="120">
								<template slot-scope="scope">
									<el-tag size="medium">{{ scope.row.haveman }}</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="关注人数" width="120">
								<template slot-scope="scope">
									<el-tag size="medium">{{ scope.row.gzcount }}</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="交易状态" width="120">
								<template slot-scope="scope">
									<span v-if="scope.row.status == 1">交易成功</span>
									<span v-if="scope.row.status == 0">未付款</span>
								</template>
							</el-table-column>
							<el-table-column style="height: 50px; width: 100px" label="操作">
								<template slot-scope="scope">
									<el-button type="danger" @click="todel(scope.row.iid)">取消关注</el-button>
								</template>
							</el-table-column>
						</el-table>
					</template>
				</div>
				<!-- 分页 -->
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="queryinfo.pagenum" :page-sizes="[1, 3, 5, 10]" :page-size="queryinfo.pagesize"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</el-tab-pane>

			<el-tab-pane label="我发起的">
				<div>
					<!-- 展示数据的table表格 -->
					<template v-show="user.idcardstatus==1">
						<el-table :data="items" style="width: 100%; padding: 30px">
							<el-table-column label="项目信息">
								<template slot-scope="scope">
									<div style="height: 120px" v-show="scope.row.status == 1">
										<p style="margin: 0 auto; text-align: center">
											{{ scope.row.iname }}
										</p>
										<p style="margin-left: 0px" v-show="scope.row.daybetween > 0">
											<span
												style="margin-right: 0px">剩余时间：{{ scope.row.daybetween }}天</span>==>已完成进度：
											<span v-show="scope.row.percentage < 100">
												<span style="color: green; font-size: 13px">众筹进行中</span>
												<el-progress style="margin-top: 10px" :text-inside="true"
													:stroke-width="24" :percentage="scope.row.percentage"
													status="success"></el-progress>
											</span>
											<span v-show="scope.row.percentage >= 100">
												<span style="color: green; font-size: 13px">众筹成功</span>
												<el-progress style="margin-top: 10px" :text-inside="true"
													:stroke-width="24" :percentage="100" status="success"></el-progress>
											</span>
										</p>
										<p style="margin-left: 0px" v-show="scope.row.daybetween <= 0">
											<span style="margin-right: 0px">众筹结束</span>=======》已完成进度：
											<span v-show="scope.row.percentage >= 100">
												<span style="color: green; font-size: 13px">众筹成功</span>
												<el-progress style="margin-top: 10px" :text-inside="true"
													:stroke-width="24" :percentage="scope.row.percentage"
													status="success"></el-progress>
											</span>
											<span v-show="scope.row.percentage < 100">
												<span style="color: red; font-size: 13px">
													众筹失败</span>
												<el-progress style="margin-top: 10px" :text-inside="true"
													:stroke-width="24" :percentage="scope.row.percentage"
													status="exception"></el-progress>
											</span>
										</p>
									</div>
									<div v-show="scope.row.status != 1">
										<p style="margin: 0 auto; text-align: center">
											{{ scope.row.iname }}
										</p>
										<p style="margin-left: 0px">项目未开始</p>

										<el-progress :text-inside="true" :stroke-width="24" :percentage="0"
											status="success"></el-progress>
									</div>
								</template>
							</el-table-column>

							<el-table-column label="筹集金额" width="120">
								<template slot-scope="scope">
									<el-tag size="medium">{{ scope.row.amoney }}</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="当前状态" width="120">
								<template slot-scope="scope">
									<span style="margin-left: 10px" v-show="scope.row.status == 0">未审核</span>
									<span style="margin-left: 10px" v-show="scope.row.status == 1">审核通过</span>
									<span style="margin-left: 10px" v-show="scope.row.status == 2">{{scope.row.notshow}}</span>
								</template>
							</el-table-column>
							<el-table-column style="height: 50px; width: 100px" label="操作">
								<template slot-scope="scope">
									<el-button type="danger" @click="handleDeleteItem(scope.row.iid)">删除</el-button>
									
									<el-popover trigger="hover" placement="top">
										<p>项目名: {{ scope.row.iname }}</p>
										<p>预筹集金额: {{ scope.row.amoney }}</p>
										<p>已筹集金额：{{ scope.row.nmoney }}</p>
										<p>项目描述：{{ scope.row.iintro }}</p>
										<div slot="reference" class="name-wrapper">
											 <el-button>预览</el-button>
										</div>
									</el-popover>
								</template>
							</el-table-column>
						</el-table>
					</template>
				</div>

				<!-- 分页 -->
				<el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
					:current-page="queryinfo2.pagenum" :page-sizes="[1, 3, 5, 10]" :page-size="queryinfo2.pagesize"
					layout="total, sizes, prev, pager, next, jumper" :total="total2">
				</el-pagination>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: '',
				total: 0,
				queryinfo: {
					pagenum: 1, //访问的页码
					pagesize: 3, //默认页面展示的条数
				},
				total1: 0,
				queryinfo1: {
					pagenum: 1, //访问的页码
					pagesize: 3, //默认页面展示的条数
				},
				items: [],
				gz: [],
				support: [],
				user: '',
				total2: 0,
				payGateWay: '',
				queryinfo2: {
					pagenum: 1, //访问的页码
					pagesize: 3, //默认页面展示的条数
				}
			}
		},
		methods: {
			async getUser() {
				// 获取user对象
				let id = window.sessionStorage.getItem("userid");
				let res = await this.$http.get("selectById?id=" + id);
				console.log(res.data.data)
				this.user = res.data.data;
			},
			async getsupport() {
				let id = window.sessionStorage.getItem("userid");
				var param = new URLSearchParams();
				param.append("pagenum", this.queryinfo1.pagenum);
				param.append("pagesize", this.queryinfo1.pagesize);
				param.append("userid", id);
				var res = await this.$http.post("subyuserid", param);
				if (res.data.data.list.length != 0) {
					this.support = res.data.data.list;
					this.total1 = res.data.data.total;
				}

			},
			async getItem1() {
				let id = window.sessionStorage.getItem("userid");
				var param = new URLSearchParams();
				param.append("pagenum", this.queryinfo2.pagenum);
				param.append("pagesize", this.queryinfo2.pagesize);
				param.append("userid", id);
				var res = await this.$http.post("selectItemByUserId", param);
				console.log(res.data)
				if (res.data.data.list.length != 0) {
					this.items = res.data.data.list;
					this.total2 = res.data.data.total;
				}

			},
			async handleDeleteItem(iid) {
				var b = confirm("确定要删除该数据吗？");
				if (b) {
					var res = await this.$http.get('deleteLuoJi?iid=' + iid);
					this.getItem1()
				}

			},
			async selectgz() {
				var id = window.sessionStorage.getItem("userid");
				var param = new URLSearchParams();
				param.append("pagenum", this.queryinfo.pagenum);
				param.append("pagesize", this.queryinfo.pagesize);
				param.append("userid", id);
				var res = await this.$http.post("selectItemByUserIds", param);
				if (res.data.data.list.length != 0) {
					this.gz = res.data.data.list;
					this.total = res.data.data.total;
				}

			},
			handleSizeChange(newpagesize) {
				this.queryinfo.pagesize = newpagesize;
				this.selectgz();
			},
			handleCurrentChange(newpagenum) {
				this.queryinfo.pagenum = newpagenum;
				this.selectgz();
			},
			handleSizeChange1(newpagesize) {
				this.queryinfo1.pagesize = newpagesize;
				this.getsupport();
			},
			handleCurrentChange1(newpagenum) {
				this.queryinfo1.pagenum = newpagenum;
				this.getsupport();
			},
			handleSizeChange2(newpagesize) {
				this.queryinfo2.pagesize = newpagesize;
				this.getItem1();
			},
			handleCurrentChange2(newpagenum) {
				this.queryinfo2.pagenum = newpagenum;
				this.getItem1();
			},
			async selectItemManByIid() {

			},
			async todelete(id) {},
			todel(iid) {
				this.$confirm("确定取消关注吗, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(async () => {
						var id = window.sessionStorage.getItem("userid");
						var param = new URLSearchParams();
						param.append("userid", id);
						param.append("iid", iid);
						var res = await this.$http.post("deleteFocus", param);
						if (res.data.code == "200") {
							this.$message.success(res.data.message);
							this.select();
						} else {
							this.$message.error(res.data.message);
						}
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除",
						});
					});
			},
			select() {
				this.queryinfo.pagenum = 1;
				this.selectgz();
			},
			async topay(supports) {
				var param = new URLSearchParams();
				param.append("orderuuid", supports.orderuuid);
				param.append("iid", supports.iid);
				param.append("allmoney", supports.allmoney);
				//成功
				var resx = await this.$http.post(
					"/alipay",
					param
				);
				if (resx.data.code == 202) {
					this.payGateWay = resx.data.data;
					console.log(this.payGateWay)
					const div = document.getElementById("xxx1");
					div.innerHTML = this.payGateWay;
					document.forms[0].submit();
					console.log(this.payGateWay);
				}
			},
			todelddan(supports) {
				this.$confirm("确定删除吗, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(async () => {
						var param = new URLSearchParams();
						param.append("orderuuid", supports.orderuuid);
						param.append("iid", supports.iid);
						param.append("allmoney", supports.allmoney);

						var res = await this.$http.post("delSupport", param);
						if (res.data.code == 200) {
							this.$message.success(res.data.message);
							this.queryinfo.pagenum = 1;
							this.getsupport();
						} else {
							this.$message.error(res.data.message);
						}
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除",
						});
					});
			}
		},
		mounted() {
			this.getUser();
			this.getItem1();
			this.selectgz();
			this.getsupport();
		},
	};
</script>

<style scoped>
	.myitem head {
		width: 100%;
	}

	.table-top {
		background-color: #dddddd;
		width: 100%;
		height: 40px;
	}

	.flex-con {
		display: flex;
		width: 700px;
		height: 300px;
		border: solid 1px black;
		align-items: center;
		justify-content: space-around;
	}

	.x1 {
		width: 100px;
		height: 100px;
		background: blanchedalmond;
	}
</style>
